<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将图片直接绘制在画布上</title>
</head>

<body>
    <img src="image/朱一龙.jpg" alt="eee" width="300">
    <canvas id="canvas" width="500" height="500" style="border: 1px solid #020202;"></canvas>
    <script>
        var canvas = document.getElementById('canvas'); //获取画布
        var context = canvas.getContext('2d'); //准备画笔
        var img = new Image(); //实例化对象
        img.src = 'image/朱一龙.jpg'; //设置图片对象的路径
        img.onload = function() {

            context.drawImage(img, 400, 50, 300, 300, 50, 50, 600, 400)

        }
    </script>
    <p style="text-align: center;">眼睛好喜欢</p>
    <p style="text-align: center;">炸蛋</p>
</body>

</html>